<template>
	    <!-- 弹出层 -->
    <div class="modal fade" id="addOrgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
      		<div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	            <h4 class="modal-title" id="myModalLabel">新增/编辑部门</h4>
          	</div>
          	<div class="modal-body">
          	 	<div class="form-horizontal">
                    <div class="form-group">
                      	<label for="" class="col-sm-4 control-label">部门名称<label style="color: red;">*</label>：</label>
                      	<div class="col-sm-8">
                        	<input type="text" id="deartmentName" name="departmentName" v-model="dept.departmentName" class="form-control" placeholder="请输入部门名称">
                      	</div>
                    </div>
                    <div class="form-group">
                      	<label for="" class="col-sm-4 control-label">部门编号&nbsp;：</label>
                      	<div class="col-sm-8">
                        	<input type="text" id="departmentCode" name="departmentCode" v-model="dept.departmentCode" class="form-control" placeholder="请输入部门编号">
                      	</div>
                    </div>
                    <div class="form-group">
			          	<label for="" class="col-sm-4 control-label">备注&nbsp;：</label>
			          	<div class="col-sm-8">
			            	<textarea class="form-control" id="remark" name="remark" v-model="dept.remark" rows="3" placeholder="备注"></textarea>
			          	</div>
		        	</div>
		        	<input type="hidden" v-model="id" class="form-control">
              	</div>
          </div>
          <div class="modal-footer">
            <!--<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
            <button type="button" v-on:click="saveOrg" v-show="btnShow" class="btn checkedBtn">确定</button>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
	export default{
		//接收父组件的绑定值
		props: ["orgModal"],
		data() {
			return {
				//机构信息对象
				dept: {
					departmentName: '',
					departmentCode: '',
					remark: '',
					userId: window.localStorage.getItem("4_userId")
				},
				parentId: '',
				id: '',
				optType: '',
				btnShow: true
			}
		},
		mounted() {
			
		},
		watch: {
			//监听父组件绑定值是否改变
			orgModal: {
				handler: function(val, oldVal){
					this.initOrg();
				},
				//深层监听，当位对象时，若设为true，属性变更时即可触发，若为false，属性无法监听到
				deep: true
			}
		},
		methods: {
			//初始化机构信息
			initOrg() {
				var _self = this;
				var orgId = this.orgModal.orgId;
				var optType = this.orgModal.optType;
				//存在机构ID,并且为修改操作时,根据ID加载一遍机构数据
				if(orgId && "U" == optType){
					_self.optType = "U"
					var params = {};
					params["id"] = orgId;
					var body = {};
					body.params = params;
			   		var url = _self.utilHelper.apiUrl + "/api/getDeptById";
			   	 	_self.$http.post(url, body).then((response) => {
							var data = response.body.resData.department;
							_self.id = data.id;
				   			_self.dept.departmentCode = data.departmentCode;
				   			_self.dept.departmentName = data.departmentName;
				   			_self.dept.remark = data.remark;
				  		}, (response) => {
				  	});
				}else if("A" == optType){
					_self.id = '';
					_self.optType = "A"
		   			_self.dept.departmentCode = '';
		   			_self.dept.departmentName = '';
		   			_self.dept.remark = '';
					//操作类型为新增时，将树节点的ID设为机构的父节点
					_self.parentId = this.orgModal.orgId;
				}
			},
			saveOrg() {
				var _self = this;
				var params = {};
				params = _self.dept;
				var url = _self.utilHelper.apiUrl + "/api/addDept";
				var body = {};
				if(_self.optType=="A"){
					//新增部门
					params.parentId = _self.parentId;
					body.params = params;
				}else{
					//编辑部门
					url = _self.utilHelper.apiUrl + "/api/editDept";
					params.id = _self.id;
					body.params = params;
				}
				if(_self.orgValidate() == true){
					_self.btnShow = false;
			   	 	_self.$http.post(url, body).then((response) => {
							var data = response.body.resData;
							var result = data.result;
				   			var resData = data.resultMsg;
							//输出操作信息
				   			layer.msg(resData, {
								time: 1000
							}, function(){
								//关闭弹出层
								_self.btnShow = true;
								$('#addOrgModal').modal('hide');
								//将dept中的内容置为初始状态
								_self.dept={
									departmentName: '',
									departmentCode: '',
									remark: '',
									userId: window.localStorage.getItem("4_userId")
								};
								//子组件向父组件传递信号: 调用父组件中对子组件的监听
								_self.$emit('saveOrgListener');
							});	 
				  		}, (response) => {
				  			_self.btnShow = true;
				  	});
				}
			},
			orgValidate() {
				var departmentName = this.dept.departmentName;
				if(!departmentName){
					layer.msg("部门名称不能为空",{
						time: 2000
					});
					return false;
				}
				if(departmentName.length > 20){
					layer.msg("部门名称过长,限制20个字符",{
						time: 2000
					});
					return false;
				}
				return true;
			}
		}
	}
	
</script>